<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>图片图层</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="//webapi.amap.com/maps?v=2.0&key=98c485ff1e3c2b4318481832bee4355a&plugin=AMap.Geocoder"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" >
    var imageLayer = new AMap.ImageLayer({
        url: 'http://yyjcs.top/dtdmeo/1.jpg',
        bounds: new AMap.Bounds(
            [116.392159,39.913331],  //x
            [116.401858,39.923715]   //y
        ),
        zooms: [15, 20]
    });
    var map = new AMap.Map('container', {
        center: [116.39705,39.917301],
        zoom: 15,
        layers: [
            AMap.createDefaultLayer(),
            imageLayer,
        ]
    });

//点添加
//1
    var marker1=new AMap.Marker({
        position:new AMap.LngLat(116.395628,39.919783),
        title:'养心殿',
        map:map
    });
    marker1.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"1养心殿"
    })

//2
    var marker2=new AMap.Marker({
        position:new AMap.LngLat(116.394426,39.919058),
        title:'慈宁宫',
        map:map
    });
    marker2.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"2慈宁宫"
    })

    //3
    var marker3=new AMap.Marker({
        position:new AMap.LngLat(116.399300,39.917853),
        title:'武备馆',
        map:map
    });
    marker3.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"3武备馆"
    })

    //4
    var marker4=new AMap.Marker({
            position:new AMap.LngLat(116.396819,39.919754),
            title:'乾清宫',
            map:map
        });
        marker4.setLabel({
            offset:new AMap.Pixel(5,5),
            content:"4乾清宫"
        })
       //5
       var marker5=new AMap.Marker({
            position:new AMap.LngLat(116.396905,39.919032),
            title:'乾清门',
            map:map
        });
        marker5.setLabel({
            offset:new AMap.Pixel(5,5),
            content:"5乾清门"
        })
       //6
       var marker6=new AMap.Marker({
            position:new AMap.LngLat(116.39683,39.921479),
            title:'御花园',
            map:map
        });
        marker6.setLabel({
            offset:new AMap.Pixel(5,5),
            content:"6御花园"
        })
		//7
		var marker7=new AMap.Marker({
		     position:new AMap.LngLat(116.400713,39.920665),
		     title:'畅音阁',
		     map:map
		 });
		 marker7.setLabel({
		     offset:new AMap.Pixel(5,5),
		     content:"7畅音阁"
		 })

// 矢量图 路线规划

var path=[//每个弧线段有两种描述方式
    [116.395628,39.919983],//起点
        //路线图
    [116.395000,39.919983],
	[116.395000,39.918553],
	[116.394400,39.918553],
	[116.399000,39.918553],
	[116.398990,39.918553],
	[116.398990,39.917853],
	[116.398990,39.918553],
	[116.398090,39.918553],
	[116.398090,39.919353],
	[116.397190,39.919353],
	[116.397190,39.919053],
	[116.396290,39.919053],
	[116.396290,39.921353],
	[116.397100,39.921353],
	[116.397100,39.922353],
	[116.401100,39.922353],
	[116.401100,39.920900],

];
var polyline = new AMap.Polyline({
      path: path,
      isOutline: true,
      outlineColor: '#ffeeff',
      borderWeight: 3,
      strokeColor: "#3366FF",
      strokeOpacity: 1,
      strokeWeight: 6,
      // 折线样式还支持 'dashed'
      strokeStyle: "solid",
      // strokeStyle是dashed时有效
      strokeDasharray: [10, 5],
      lineJoin: 'round',
      lineCap: 'round',
      zIndex: 50,
    })
    map.add([polyline]);
    map.setFitView();
</script>
</body>
</html>
